<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改个人信息</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootbox.min.js"></script>
</head>
<body class="container">
	<div class=" panel panel-warning ">
		<div class="panel-heading">
			<h3 class="panel-title">修改个人信息</h3>
		</div>
		<div class="panel-body">
			<form id="upForm" class="form-horizontal">
				<div class="form-group">
					<label class="col-xs-2 control-label">用户名</label>
					<div class="col-xs-10">
						<input type="text" class="form-control" name="username" readonly>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">密码</label>
					<div class="col-xs-10">
						<input type="password" class="form-control" name="password" placeholder="密码" autofocus required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">姓名</label>
					<div class="col-xs-10">
						<input type="text" class="form-control" name="name" placeholder="姓名" required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">昵称</label>
					<div class="col-xs-10">
						<input type="text" class="form-control" name="nic" placeholder="昵称" placeholder="请输入4-30个字符" pattern="^\w{4,30}$" required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">性别</label>
					<div class="col-xs-10">
						<div class="col-xs-6 radio">
							<label> <input type="radio" name="sex" id="opSex1" value="0" checked>男
							</label>
						</div>
						<div class="col-xs-6 radio">
							<label> <input type="radio" name="sex" id="opSex2" value="1"> 女
							</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">年龄</label>
					<div class="col-xs-10">
						<input type="text" class="form-control" name="age" placeholder="年龄" pattern="^1[89]|[2-4]\d|50$">
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">邮箱</label>
					<div class="col-xs-10">
						<input type="email" class="form-control" name="email" placeholder="邮箱">
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">电话</label>
					<div class="col-xs-10">
						<input type="tel" class="form-control" name="phone" placeholder="电话" pattern="^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$">
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-2 control-label">个人说明</label>
					<div class="col-xs-10">
						<textarea class="form-control" name="selfshow" placeholder="个人说明"></textarea>
					</div>
				</div>
				<div class="form-group">
					<button id="btnReg" class="btn btn-info btn-block" type="submit">修改</button>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			var username;
			$.ajax({
				url : "../usersession",
				async : false,
				type : "GET"
			}).done(function(result) {
				username = result;
			});
			if(username==""){
				window.location.href="noauthority.html";
				return;
			}
			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null)
					return unescape(r[2]);
				return null;
			}
			var username = getQueryString("username");
			var id;
			$.ajax({
				url : "../user/" + username,
				type : "GET"
			}).done(
					function(user) {
						id=user.id;
						$("input[name=username]").val(user.username);
						$("input[name=password]").val(user.password);
						$("input[name=name]").val(user.name);
						$("input[name=nic]").val(user.nic);
						$("input[name=sex][value=" + user.sex + "]").attr(
								"checked", true);
						$("input[name=age]").val(user.age);
						$("input[name=email]").val(user.email);
						$("input[name=phone]").val(user.phone);
						$("input[name=selfshow]").val(user.selfshow);
					});

			$("#upForm").submit(function() {
				var username = $("input[name=username]").val();
				var password = $("input[name=password]").val();
				var name = $("input[name=name]").val();
				var nic = $("input[name=nic]").val();
				var sex = $("input[name=sex]:checked").val();
				var age = $("input[name=age]").val();
				var email = $("input[name=email]").val();
				var phone = $("input[name=phone]").val();
				var selfshow = $("input[name=selfshow]").val();
				var user = {
					id : id,
					username : username,
					password : password,
					name : name,
					nic : nic,
					sex : sex,
					age : age,
					email : email,
					phone : phone,
					selfshow : selfshow
				};
				$.ajax({
					url : "../user",
					type : "PUT",
					data : JSON.stringify(user),
					headers : {
						"Content-Type" : "application/json",
						"charset" : "utf-8"
					}
				}).done(function(result) {
					if (result == 'success') {
						window.location.href = "upsuccess.html";
					} else {
						bootbox.alert(result);
					}
				});
				return false;
			});
		});
	</script>
</body>
</html>